<template xmlns:v-on="http://www.w3.org/1999/xhtml">

  <div class="teachers">
    <h1>{{ sname}}老师信息</h1>
    <h2 v-if="loaded && teachers.length == 0">暂无该学科老师信息</h2>
    <div v-if ="loading" class="loading">Loading...</div>
    <div v-if="error" class="error">{{ error }}</div>
    <div v-if="teachers" class="content">
      <dl v-for="(teacher,index) in teachers" :key="index">
        <div class="photo">
          <img :src= "Alice"  height="140" alt="">
        </div>
        <div class="info">
          <div>
            <span><strong>姓名：{{ teacher.name }}</strong></span>
            <span>性别：{{ teacher.sex }}</span>
            <span>出生日期：{{ teacher.birth }}</span>
          </div>
          <div class="intro">{{ teacher.intro }}</div>
          <div class="comment" >
            <button href="" @click.prevent="vote(teacher.no, index, true)">好评</button>&nbsp;&nbsp;
            (<strong>{{ teacher.good_count }}</strong>)&nbsp;&nbsp;
            <button href="" @click.prevent="vote(teacher.no, index, false)" >差评</button>&nbsp;&nbsp;
            (<strong>{{ teacher.bad_count }}</strong>)
          </div>
        </div>
      </dl>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import Vue from 'vue'
  export default {
    // name属性指向的是当前组件的名称
    name: 'teachers',
    computed:{
      sname(){
        return  this.$route.params.sname; // John
      }
    },
    mounted(){
      // this.vote()
    },
    // vue 组件渲染期间需要用到的数据，可以定义在 data 节点中
    data() {
      return {
        loading:false,
        error:null,
        teachers: {
          good_count:0,
          bad_count:0
        },
        Alice: require('../assets/Alice.png'),
        Amy: require('../assets/Amy.png'),
      }
    },
    created() {
      let sno = this.$route.params.sno; // John
      this.showTeacher(sno);
    },
    // 组件中的事件处理函数
    methods: {
      async showTeacher(sno) {
        this.error = this.teachers = null
        this.loading = true
        try{
          await axios.get('teachers/?sno=' + sno)
                .then(response => {
                  console.log("response---:", response)
                  this.teachers = response.data.results;
                  console.log("teachers---:", this.teachers)
                })
                .catch(error => {
                  console.error('There was an error!', error);
                });
        }catch (err) {
          console.log(err)
        }finally {
          this.loading = false
        }

      },
      vote(tno,index,flag){
        let url = flag? '/praise/' :'/criticize/'
        console.log("teacher info:",tno)
        const params = {"tno":tno}
        //const headers = {"Access-Control-Allow-Headers":"token,Content-Type,accept, authorization, content-type, user-agent, x-csrftoken, x-requested-with","authorization":localStorage.getItem("token")}
        const headers = {"authorization":localStorage.getItem("token")}
        console.log("url",url)
        axios.get(url, {params:params,headers:headers})
                .then(response =>{
                console.log("response---:", response)
                if(response.data.code ===20000){
                  const count = response.data.count
                  if(flag){
                    Vue.set(this.teachers[index],'good_count',count)
                  }else {
                    Vue.set(this.teachers[index],'bad_count',count)
                  }
                }
                if (response.data.code === 10003){
                  console.log("10003 需要重新登录")
                  this.$router.push('/login')
                }
              })
      }
    }
  };

</script>

<style>
  /* 组件的样式 */
</style>
